<template>
  <el-dialog
    title="合作商详情"
    :visible="hzsXqVisible"
    width="50%"
    @close="closeFn"
  >
    <span>
      <div class="content">
        <div class="title">
          <span>合作商名称：</span>
          <span>{{obj.name}}</span>
        </div>
      <div class="name">
        <span>联系人：</span>
          <span>{{obj.contact}}</span>
      </div>
      <div class="momile">
        <span>联系电话：</span>
          <span>{{obj.mobile}}</span>
      </div>
      <div class="bili">
        <span>分寸比例：</span>
          <span>{{obj.ratio}}</span>
      </div>
      </div>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    hzsXqVisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      obj: {}
    }
  },
  created () {},
  mounted () {},
  methods: {
    closeFn () {
      this.$emit('update:hzsXqVisible', false)
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  display: flex;
  width: 603px;
  flex-wrap:wrap;
  padding-left: 10px;
  text-align: right;
  span{
    display: block;
    width: 150px;
  }
  span:last-child{
    text-align: left;
  }
  .title{
  display: flex;
    width: 295px;
    height: 36px;
  }
   .name{
  display: flex;
    width: 295px;
    height: 36px;
  }
   .momile{
  display: flex;
    width: 295px;
    height: 36px;
  }
   .bili{
  display: flex;
    width: 295px;
    height: 36px;
  }

}
</style>
